<script lang="ts" setup>
import { computed, ref, unref, watch, nextTick, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
import { useVbenForm } from '#/adapter/form';
import { useVbenDrawer } from '@vben/common-ui';
import { createUser, updateUser } from '#/api/system/user';
import type { UserCreateParams, UserUpdateParams } from '#/api/system/user';
import { $t } from '#/locales';
import { useCreateFormSchema, useFormSchema } from '../data';

const emit = defineEmits(['success', 'register']);

// 表单状态
const isUpdate = ref(false);
const userId = ref('');
const loading = ref(false);
const formInitialized = ref(false);
const formData = ref();

// 响应式布局配置
const breakpoints = useBreakpoints(breakpointsTailwind);
const isHorizontal = computed(() => breakpoints.greaterOrEqual('md').value);

// 表单提交处理函数 - 统一处理逻辑
async function handleSubmit(values: any) {
  try {
    loading.value = true;

    if (isUpdate.value) {
      // 更新用户
      const updateData: UserUpdateParams = {
        ...values,
        id: userId.value
      };
      await updateUser(userId.value, updateData);
      ElMessage.success($t('system.user.updateSuccess'));

      // 成功时触发成功事件
      emit('success');
      // 成功时返回true，允许抽屉关闭
      return true;
    } else {
      // 创建用户需要确保有必需的字段
      if (!values.userName || !values.password) {
        throw new Error('用户名和密码为必填项');
      }

      // 自动设置confirmPassword与password相同
      const createData = {
        ...values,
        confirmPassword: values.password
      } as UserCreateParams;

      await createUser(createData);
      ElMessage.success($t('system.user.createSuccess'));

      // 成功时触发成功事件
      emit('success');
      // 成功时返回true，允许抽屉关闭
      return true;
    }
  } catch (error: any) {
    console.error('保存用户失败:', error);
    // 错误时返回false，不关闭抽屉
    return false;
  } finally {
    loading.value = false;
    // 无论成功失败，都重置抽屉状态
    drawerApi.setState({
      closeOnClickModal: true,
      closeOnPressEscape: true,
      confirmLoading: false,
      loading: false,
    });
  }
}

// 基础表单配置
const [Form, formApi] = useVbenForm({
  // 直接使用创建表单的schema初始化
  schema: useCreateFormSchema(),
  commonConfig: {
    labelWidth: 120,
    // 所有表单项的公共配置
    componentProps: {
      class: 'w-full',
    },
    // 设置表单项的默认占用列数，移动端1行1个，桌面端1行2个
    formItemClass: 'col-span-2 md:col-span-1',
  },
  layout: 'horizontal',
  // 使用网格布局，2列，水平间隔4单位
  wrapperClass: 'grid grid-cols-2 gap-x-4',
  showDefaultActions: false,
  // 不设置handleSubmit，我们将手动调用
});

// 确保表单初始化完成
onMounted(async () => {
  try {
    // 先更新schema
    await formApi.updateSchema(useCreateFormSchema());
    formInitialized.value = true;
  } catch (error) {
    console.error('表单初始化失败:', error);
  }
});

// 表单模式 - 确保根据isUpdate状态选择正确的schema
const formSchema = computed(() => {
  return isUpdate.value ? useFormSchema() : useCreateFormSchema();
});

// 修改监听表单模式变化部分
watch(
  () => isUpdate.value, // 直接监听isUpdate状态变化
  async (newValue) => {
    try {
      // 根据当前状态更新schema
      const schema = newValue ? useFormSchema() : useCreateFormSchema();
      await formApi.updateSchema(schema);
    } catch (error) {
      console.error('更新表单模式失败:', error);
    }
  },
  { immediate: true } // 初始化时执行一次
);

// 抽屉标题
const getDrawerTitle = computed(() => {
  return isUpdate.value
    ? $t('ui.actionTitle.edit', [$t('system.user.userName')])
    : $t('ui.actionTitle.create', [$t('system.user.userName')]);
});

// 表单提交处理
async function onSubmit() {
  // 表单提交处理函数
  const { valid } = await formApi.validate();
  // 验证表单，获取验证结果

  if (valid) {
    // 如果验证通过
    loading.value = true;
    drawerApi.setState({
      closeOnClickModal: false,
      closeOnPressEscape: false,
      confirmLoading: true,
      loading: true,
    });

    // 获取表单值并调用统一处理函数
    const values = await formApi.getValues();
    const success = await handleSubmit(values);

    // 如果提交成功，关闭抽屉
    if (success) {
      drawerApi.close();
    }
  }
}

// 初始化抽屉
const [Drawer, drawerApi] = useVbenDrawer({
  // 关闭前检查，如果正在加载则阻止关闭
  onBeforeClose() {
    if (loading.value) return false;
    return true;
  },
  // 确认按钮回调
  onConfirm: onSubmit,
  // 抽屉打开状态变化处理
  onOpenChange(isOpen) {
    if (isOpen) {
      // 获取传递给抽屉的数据
      const data = drawerApi.getData();
      // 确保data是一个对象
      formData.value = data || {};

      // 判断是创建还是编辑模式
      isUpdate.value = !!formData.value?.id;
      userId.value = formData.value?.id || '';

      // 重置表单
      formApi.resetForm();

      // 根据模式更新schema - 确保在设置值之前更新schema
      const schema = isUpdate.value ? useFormSchema() : useCreateFormSchema();
      formApi.updateSchema(schema);

      // 填充表单数据
      if (formData.value && Object.keys(formData.value).length > 0) {
        formApi.setValues(formData.value);
      }
    }
  },
});
</script>

<template>
  <Drawer class="w-full max-w-[800px]" :title="getDrawerTitle">
    <Form class="mx-4" :layout="isHorizontal ? 'horizontal' : 'vertical'" />
  </Drawer>
</template>

<style scoped>
</style>
